import React, {Component} from 'react';
import { View, Text, StyleSheet, PixelRatio } from 'react-native';

export default class Title extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillMount() {

    }
    componentDidMount() {

    }

    render() {
        const {hasLeftTitle, renderLeftTitle, navigation, titleName, hasRightTitle, renderRightTitle} = this.props
        return (
            <View style={styles.titleWrap}>
                <View style={styles.titleLeftWrap}>
                    {hasLeftTitle && renderLeftTitle ?
                        renderLeftTitle :
                        hasLeftTitle && <Text onPress={() => navigation.goBack()} >Back</Text>
                    }
                </View>
                <View style={styles.titleCenterWrap}>
                    <Text style={styles.titleName}>{titleName}</Text>
                </View>
                <View style={styles.titleRightWrap}>
                    {hasRightTitle && renderRightTitle ? renderRightTitle :
                    hasRightTitle && <Text></Text>}
                </View>
            </View>
        )
    }

}

var styles = StyleSheet.create({
    titleWrap: {
        height: 58,
        borderBottomColor: '#eee',
        borderBottomWidth: 1,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        paddingTop: 15,
    },
    titleLeftWrap: {
        flex: 1,
        alignItems: 'center'
    },
    titleRightWrap: {
        flex: 1,
        alignItems: 'center'
    },
    titleCenterWrap: {
        flex: 5,
        alignItems: 'center'
    },
    titleName: {
        fontSize: 22
    }
})